<template>
<div>
<!--  面包屑-->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item :to="{path: '/goods'}">商品列表</el-breadcrumb-item>
    <el-breadcrumb-item>修改商品</el-breadcrumb-item>
  </el-breadcrumb>
<!--  卡片区域-->
  <el-card>
  <el-alert
      title="修改商品信息"
      type="info"
      center
      show-icon
      :closable="false">
  </el-alert>
<!--  步骤条-->
  <el-steps :active="activeIndex-0" finish-status="success" simple style="margin-top: 20px">
    <el-step title="基本信息" ></el-step>
    <el-step title="商品参数" ></el-step>
    <el-step title="商品属性" ></el-step>
    <el-step title="商品图片" ></el-step>
    <el-step title="商品内容" ></el-step>
    <el-step title="完成" ></el-step>
  </el-steps>
    <!--    tabs侧栏-->
    <el-form>
    <el-tabs :tab-position="'left'" v-model="activeIndex">
      <el-tab-pane label="基本信息" name="0">
        <el-form-item label="商品名称" prop="goods_name">
          <el-input v-model="editForm.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input></el-input>
        </el-form-item>
      </el-tab-pane>
      <el-tab-pane label="商品参数"  name="1">配置管理</el-tab-pane>
      <el-tab-pane label="商品属性"  name="2">角色管理</el-tab-pane>
      <el-tab-pane label="商品图片"  name="3">角色管理</el-tab-pane>
      <el-tab-pane label="商品内容"  name="4">定时任务补偿</el-tab-pane>
    </el-tabs>
    </el-form>
  </el-card>

  <!--  图片预览对话框-->

</div>
</template>

<script>
export default {
  name: "edit",
  data(){
    return{
      // 商品id;
      goodsId:this.$route.params.id,
      // 修改商品表单数据对象
      editForm:{
          goods_name:'',

      },
      // 修改商品信息表单验证规则
      editFormules: {
        goods_name:[
          {required:true,message:'请填写商品名称',trigger:'blur'}
        ],

  },
      // tabs侧栏选中选项卡的序号
      activeIndex:'0',
      // 查询到的商品信息数据对象
      goodsInfo:{}
    }
  },
  created() {
      this.getGoodsInfoById();
  },
  mounted() {

  },
  methods:{
   async getGoodsInfoById(){
      const {data:res}=await this.$http.get(`goods/${this.goodsId}`);
      if(res.meta.status !==201){
        return this.$message.error("获取商品信息失败")
      }
      // 成功查询到商品信息
     this.goodsInfo=res.data;
    }
  }


}
</script>

<style scoped>
.el-tabs{
  margin-top:20px ;
}
</style>